@import '../bootstrap'
@import '../theme'

navigation-drawer($material)
  background-color: $material.cards

  &:not(.navigation-drawer--floating)
    .navigation-drawer__border
      background-color: $material.dividers

  a:not(.list__tile--active),
  .list
    color: $material.text.primary

  .divider
    background-color: $material.dividers

  .list
    &__tile:not(.list__tile--active)
      color: $material.text.primary

      .icon
        color: $material.icons.active

    &__tile__sub-title
      color: $material.text.secondary

  .list--group__header--active
    .list__tile, + .list--group
      &:after
        background: $material.dividers

theme(navigation-drawer, "navigation-drawer")

.navigation-drawer
  max-width: 100%
  overflow-y: auto
  overflow-x: hidden
  -webkit-overflow-scrolling: touch
  padding: 0 0 100px
  pointer-events: auto
  transition: .2s $transition.fast-out-slow-in
  top: 0
  left: 0
  will-change: transform
  z-index: 3

  &__border
    position: absolute
    right: 0
    top: 0
    height: 100%
    width: 1px

  &.navigation-drawer--right
    &:after
      left: 0
      right: initial

  &--close
    &.navigation-drawer:not(.navigation-drawer--right)
      transform: translateX(-100%)

    &.navigation-drawer--right
      transform: translateX(100%)

  &--right
    left: auto
    right: 0

    > .navigation-drawer__border
      right: auto
      left: 0

  &--absolute
    position: absolute

  &--fixed
    position: fixed

  &--floating:after
    display: none

  &--mini-variant
    overflow: hidden

    .list__tile__action,
    .list__tile__avatar
      justify-content: center
      min-width: 48px

    .list__tile__content,
    .list__tile:after
      opacity: 0

    .subheader,
    .divider,
    .list--group
      display: none !important

  &--temporary,
  &--is-mobile
    z-index: 6

    &:not(.navigation-drawer--close)
      elevation(16)

  .list
    background: inherit

  > .list
    .list__tile
      transition: none
      font-weight: $navigation-drawer-item-font-weight

      &--active
        .list__tile__title
          color: inherit

    .list--group
      .list__tile
        font-weight: $navigation-drawer-group-item-font-weight

      &__header--active
        &:after
          background: transparent

  > .list:not(.list--dense)
    .list__tile
      font-size: $navigation-drawer-item-font-size
